<template>
  <div class="app-container">
    <div class="head-container">
      <el-select
        v-model="params.coinCode"
        clearable
        size="small"
        style="width: 180px"
        class="filter-item"
        placeholder="交易区"
      >
        <el-option
          v-for="item in options"
          :key="item.coinCode"
          :label="item.coinCode"
          :value="item.coinCode"
        />
      </el-select>
      <el-select
        v-model="params.coinMarketCode"
        clearable
        size="small"
        style="width: 180px"
        class="filter-item"
        placeholder="交易对"
      >
        <el-option
          v-for="item in options1"
          :key="item.coinMarketCode"
          :label="item.coinMarketCode"
          :value="item.coinMarketCode"
        />
      </el-select>
      <el-button
        class="filter-item"
        size="mini"
        type="success"
        icon="el-icon-search"
        @click="search"
      >搜索</el-button
      >
      <el-button
        class="filter-item"
        size="mini"
        type="warning"
        icon="el-icon-refresh-left"
        @click="resetList"
      >重置</el-button
      >
      <el-button
        v-permission="permission.add"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="handleOpen()"
      >
        新增
      </el-button>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="loading"
      :data="cruddata"
      style="width: 100%"
    >
      <el-table-column type="index" prop="sort" />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="coinCode"
        label="交易区"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="coinMarketCode"
        label="币对"
      />
      <el-table-column
        prop="weight"
        :show-overflow-tooltip="true"
        label="权重"
      />
      <el-table-column
        prop="makerFee"
        :show-overflow-tooltip="true"
        label="maker买费率（%）"
      />
      <el-table-column
        prop="makerSellFee"
        :show-overflow-tooltip="true"
        label="maker卖费率（%）"
      />
      <el-table-column
        prop="takerFee"
        :show-overflow-tooltip="true"
        label="taker买费率（%）"
      />
      <el-table-column
        prop="takerSellFee"
        :show-overflow-tooltip="true"
        label="taker卖费率（%）"
      />
      <el-table-column label="上下架开关" width="120px" fixed="right">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isShow"
            v-permission="permission.switch"
            :active-value="1"
            :inactive-value="0"
            @change="change(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120px" fixed="right">
        <template slot-scope="scope">
          <span
            v-permission="permission.view"
            class="btn"
            @click="handleOpen(scope.row, 'view')"
          >
            查看
          </span>
          <span
            v-permission="permission.edit"
            class="btn"
            @click="handleOpen(scope.row, 'edit')"
          >
            编辑
          </span>
          <span
            v-permission="permission.del"
            class="btn"
            @click="toDelete(scope.row)"
          >
            删除
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination
      :total="total"
      :page="params.page"
      :limit="params.pageSize"
      @pagination="pagination"
    />

    <!-- 侧抽屉 -->
    <el-drawer
      :visible.sync="drawer"
      :before-close="handleClose"
      direction="rtl"
      :append-to-body="false"
      custom-class="common-drawer"
      size="600px"
      :show-close="false"
    >
      <div slot="title" class="drawer-title">
        <span>{{ title }}</span>
        <span class="el-icon-close" @click="handleClose" />
      </div>
      <div class="drawer-content">
        <el-scrollbar
          :native="false"
          :noresize="false"
          class="dark fix bannerform"
        >
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item label="币对：">
              <el-select
                v-model="ruleForm.coin1"
                placeholder="请选择"
                :disabled="disabled"
                style="display: inline-block"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.coinCode"
                  :label="item.coinName"
                  :value="item.coinCode"
                />
              </el-select>
              -
              <el-select
                v-model="ruleForm.coin2"
                placeholder="请选择"
                :disabled="disabled"
                style="display: inline-block"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.coinCode"
                  :label="item.coinName"
                  :value="item.coinCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="交易区：" prop="baseId">
              <el-select
                v-model="ruleForm.baseId"
                placeholder="请选择"
                :disabled="disabled"
                style="display: inline-block"
              >
                <el-option
                  v-for="item in options4"
                  :key="item.id"
                  :label="item.coinCode"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="价格精度：" prop="priceDecimal">
              <el-input v-model="ruleForm.priceDecimal" v-only-number="{ min: 0, max: 8}" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="数量精度：" prop="amountDecimal">
              <el-input v-model="ruleForm.amountDecimal" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="最小交易数量：" prop="minAmount">
              <el-input v-model="ruleForm.minAmount" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="交易额精度：" prop="moneyDecimal">
              <el-input v-model="ruleForm.moneyDecimal" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="最小交易额：" prop="digitLimit">
              <el-input v-model="ruleForm.digitLimit" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="Maker买费率：" prop="makerFee">
              <el-input
                v-model="ruleForm.makerFee"
                v-only-number="{ min: 0, max: 100, precision: 5 }"
                :disabled="disabled"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="Maker卖费率：" prop="makerSellFee">
              <el-input
                v-model="ruleForm.makerSellFee"
                v-only-number="{ min: 0, max: 100, precision: 5 }"
                :disabled="disabled"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="Taker买费率：" prop="takerFee">
              <el-input
                v-model="ruleForm.takerFee"
                v-only-number="{ min: 0, max: 100, precision: 5 }"
                :disabled="disabled"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item
              v-only-number="{ min: 0, max: 100, precision: 5 }"
              label="Taker卖费率："
              prop="takerSellFee"
            >
              <el-input v-model="ruleForm.takerSellFee" :disabled="disabled">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="权重：" prop="weight">
              <el-input v-model="ruleForm.weight" :disabled="disabled" />
            </el-form-item>
          </el-form>
        </el-scrollbar>
        <div class="fix-bottom">
          <el-button
            type="text"
            :disabled="disabled"
            @click="handleClose"
          >取消</el-button
          >
          <el-button
            type="primary"
            :disabled="disabled"
            @click="submitForm('ruleForm')"
          >确认</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import pagination from '@/components/Pagination'
import {
  getCoinList,
  getMarketAdd,
  getMarketTitle,
  getMarketList,
  getMarketUpdate
} from '@/api/currcoin'
export default {
  name: 'Customer',
  components: { pagination },
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
        coinCode: null,
        coinMarketCode: null,
        endDate: null,
        endDate: null,
        field: null,
        id: null,
        startDate: null,
        startDate: null
      },
      permission: {
        switch: ['admin', 'currcointranpair:switch'],
        view: ['admin', 'currcointranpair:view'],
        add: ['admin', 'currcointranpair:add'],
        edit: ['admin', 'currcointranpair:edit'],
        del: ['admin', 'currcointranpair:del']
      },
      cruddata: [],
      total: 0,
      loading: false,

      drawer: false,
      ruleForm: {
        amountDecimal: null,
        baseId: null,
        coinMarketCode: null,
        priceDecimal: null,
        minAmount: null,
        moneyDecimal: null,
        digitLimit: null,
        makerFee: null,
        makerSellFee: null,
        takerFee: null,
        takerSellFee: null,
        weight: null,
        coin1: null,
        coin2: null,
        id: null
      },
      rules: {
        priceDecimal: [
          { required: true, message: '请输入价格精度', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
        ],
        amountDecimal: [
          { required: true, message: '请输入数量精度', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
        ],
        minAmount: [
          { required: true, message: '请输入最小交易数量', trigger: 'blur' }
          // { pattern: /^[1-9]\d*$/, message: "请输入正整数", trigger: "blur" },
        ],
        moneyDecimal: [
          { required: true, message: '请输入交易额精度', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
        ],
        digitLimit: [
          { required: true, message: '请输入最小交易额', trigger: 'blur' }
          // { pattern: /^[1-9]\d*$/, message: "请输入正整数", trigger: "blur" },
        ],
        weight: [
          { required: true, message: '请输入权重', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
        ],
        makerFee: [
          { required: true, message: '请输入Maker买费率', trigger: 'blur' }
          // { pattern: /^[1-9]\d*$/, message: "请输入正整数", trigger: "blur" },
        ],
        makerSellFee: [
          { required: true, message: '请输入Maker卖费率', trigger: 'blur' }
          // { pattern: /^[1-9]\d*$/, message: "请输入正整数", trigger: "blur" },
        ],
        takerFee: [
          { required: true, message: '请输入Taker买费率', trigger: 'blur' }
          // { pattern: /^[1-9]\d*$/, message: "请输入正整数", trigger: "blur" },
        ],
        takerSellFee: [
          { required: true, message: '请输入Taker卖费率', trigger: 'blur' }
          // { pattern: /^[1-9]\d*$/, message: "请输入正整数", trigger: "blur" },
        ],
        baseId: [
          { required: true, message: '请选择交易区', trigger: 'change' }
        ]
      },
      options: [],
      options1: [],
      options2: [],
      options3: [],
      options4: [],
      id: null,
      title: '新增币对',
      disabled: false,
      readonly: false,
      checkList: []
    }
  },
  created() {
    this.getList()
    getCoinList({
      page: 1,
      pageSize: 100
    }).then((res) => {
      if (res.code == 0) {
        this.options2 = res.data
        this.options3 = res.data
      } else {
        this.$message.error(res.message)
      }
    })
    getMarketList({
      page: 1,
      pageSize: 100
    }).then((res) => {
      if (res.code == 0) {
        this.options1 = res.records
      } else {
        this.$message.error(res.message)
      }
    })
    getMarketTitle().then((res) => {
      if (res.code == 0) {
        this.options4 = res.data
        this.options = res.data
      } else {
        this.$message.error(res.message)
      }
    })
  },
  methods: {
    handleOpen(data, type) {
      this.drawer = true
      if (data) {
        if (type == 'edit') {
          this.title = '编辑币对'
          this.disabled = false
        } else if (type == 'view') {
          this.title = '查看币对'
          this.disabled = true
        }
        const str = data.coinMarketCode
        const arr = str.split('_')
        this.ruleForm = data
        this.id = data.id
        this.ruleForm.coin1 = arr[0]
        this.ruleForm.coin2 = arr[1]
      } else {
        this.title = '新增币对'
        this.disabled = false
        this.ruleForm = {
          amountDecimal: null,
          baseId: null,
          coinMarketCode: null,
          priceDecimal: null,
          minAmount: null,
          moneyDecimal: null,
          digitLimit: null,
          makerFee: null,
          makerSellFee: null,
          takerFee: null,
          takerSellFee: null,
          weight: null,
          coin1: null,
          coin2: null,
          id: null,
          status: 1,
          version: null,
          type: null,
          quoteId: null,
          minDecimal: null,
          maxDecimal: null,
          maxAmount: null,
          isShow: 0,
          isRecommend: 1,
          isComing: null,
          feeDecimal: null,
          depthMerge: null,
          defaultDecimal: null
        }
      }
    },
    handleClose() {
      this.drawer = false
    },
    change(data) {
      getMarketUpdate(data).then((res) => {
        if (res.code == 0) {
          this.$message.success('修改成功')
          this.getList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    changeFile(fileRaw) {
      const file = fileRaw.raw
      const isJPG = file.type.indexOf('image') >= 0
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是图片格式!')
        return
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return
      }
      const formData = new FormData()
      formData.append('file', file)
      this.ruleForm.imgFile = file
      uploadFile(formData).then((res) => {
        if (res.code === 0) {
          this.$set(this.ruleForm, 'coinLogo', res.data)
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.coin1 && this.ruleForm.coin2) {
            this.ruleForm.coinMarketCode =
              this.ruleForm.coin1 + '_' + this.ruleForm.coin2
          }
          const ruleForms = {
            amountDecimal: +this.ruleForm.amountDecimal,
            baseId: this.ruleForm.baseId,
            coinMarketCode: this.ruleForm.coinMarketCode,
            priceDecimal: +this.ruleForm.priceDecimal,
            minAmount: +this.ruleForm.minAmount,
            moneyDecimal: +this.ruleForm.moneyDecimal,
            digitLimit: +this.ruleForm.digitLimit,
            makerFee: +this.ruleForm.makerFee,
            makerSellFee: +this.ruleForm.makerSellFee,
            takerFee: +this.ruleForm.takerFee,
            takerSellFee: +this.ruleForm.takerSellFee,
            weight: this.ruleForm.weight,
            status: this.ruleForm.status,
            version: this.ruleForm.version,
            type: this.ruleForm.type,
            quoteId: this.ruleForm.quoteId,
            minDecimal: this.ruleForm.minDecimal,
            maxDecimal: this.ruleForm.maxDecimal,
            maxAmount: this.ruleForm.maxAmount,
            isShow: this.ruleForm.isShow, // 0
            isRecommend: this.ruleForm.isRecommend, // 1
            isComing: this.ruleForm.isComing,
            feeDecimal: this.ruleForm.feeDecimal,
            depthMerge: this.ruleForm.depthMerge,
            defaultDecimal: this.ruleForm.defaultDecimal,
            id: this.id
          }
          if (this.title == '新增币对') {
            getMarketAdd(ruleForms).then((res) => {
              if (res.code == 0) {
                this.$message.success('新增成功')
                this.handleClose()
                this.getList()
              } else {
                this.$message.error(res.message)
              }
            })
          } else if (this.title == '编辑币对') {
            getMarketUpdate(ruleForms).then((res) => {
              if (res.code == 0) {
                this.$message.success('编辑成功')
                this.handleClose()
                this.getList()
              } else {
                this.$message.error(res.message)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    // 删除
    toDelete(data) {
      data.status = 2
      getMarketUpdate(data).then((res) => {
        if (res.code == 0) {
          this.$message.success('删除成功')
          this.getList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    search() {
      this.params.page = 1
      this.getList()
    },
    getList() {
      this.loading = true
      getMarketList(this.params).then((res) => {
        if (res.code == 0) {
          this.cruddata = res.records
          this.total = +res.total
        } else {
          this.$message.error(res.message)
        }
        setTimeout(() => {
          this.loading = false
        }, 1000)
      })
    },
    pagination(data) {
      this.params.page = data.page
      this.params.pageSize = data.limit
      this.getList()
    },

    resetList() {
      this.params = {
        page: 1,
        pageSize: 10,
        coinCode: null,
        coinMarketCode: null,
        endDate: null,
        endDate: null,
        field: null,
        id: null,
        startDate: null,
        startDate: null
      }
      // this.timeRange = null;
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.bannerform {
  .avatar-uploader .el-upload {
    width: 150px !important;
    height: 150px !important;
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff !important;
  }

  .avatar-uploader-icon {
    font-size: 18px !important;
    color: #8c939d !important;
    width: 150px !important;
    height: 150px !important;
    line-height: 150px !important;
    text-align: center !important;
    border: 1px dashed #d9d9d9 !important;
  }

  .avatar {
    width: 150px !important;
    height: 150px !important;
    display: block !important;
  }
}
.btn {
  color: #409eff;
  cursor: pointer;
}
</style>
